<template>
  <div style="height: 100%">
    <g-dynamic-table
      type="auditlogs"
      ref="table"
      :fetch="fetchDataList"
      @action-click="handleActionClick"
      rowKey="value"
      :showExport="true"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'exceptionType'">
          <CheckCircleTwoTone v-if="!record.exception" twoToneColor="#52c41a" />
          <ExclamationCircleTwoTone v-if="record.exception" twoToneColor="#ff0000" />
        </template>
        <!-- 异常 -->
      </template>
    </g-dynamic-table>
  </div>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import { AuditLogServiceProxy } from '/@/shared/service-proxies';
  import AuditLogsDetails from './audit-logs-detail/audit-logs-detail.vue';
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';
  import { defineComponent } from 'vue';
  import { AuditLogListDto } from '/@/shared/service-proxies/service-proxies';
  import { EVENT_BTN_ENUM } from '/@/shared/components/g-dynamic-table/enums/event-btn-enum';
  import GDynamicTable from '/@/shared/components/g-dynamic-table/index.vue';
  import { CheckCircleTwoTone, ExclamationCircleTwoTone } from '@ant-design/icons-vue';
  dayjs.locale('zh-cn');

  export default defineComponent({
    name: 'audit-logs-news',
    components: {
      AuditLogsDetails,
      GDynamicTable,
      CheckCircleTwoTone,
      ExclamationCircleTwoTone,
    },
    mixins: [AppComponentBase],
    data() {
      return {
        // 是否显示高级过滤
        advancedFiltersVisible: false,
        selectedRows: [],
        dataList: [] as AuditLogListDto[],
        _auditLogServiceProxy: new AuditLogServiceProxy(this.$apiUrl, this.$api),
        /** 选中 */
        Items: AuditLogListDto,
      };
    },
    methods: {
      /**查询数据 */
      fetchDataList(otherQuery) {
        const {
          maxResultCount,
          skipCount,
          sorting,
          UserName,
          ErrorState,
          DateRange,
          Service,
          MinExecutionDuration,
          MaxExecutionDuration,
          MethodName,
          Browser,
        } = (this.$refs.table as any).getSearchProps();
        return new Promise((resolve, reject) => {
          this._auditLogServiceProxy
            .getPagedAuditLogs(
              !DateRange ? undefined : DateRange[0],
              !DateRange ? undefined : DateRange[1],
              UserName,
              Service,
              MethodName,
              Browser,
              ErrorState,
              MinExecutionDuration,
              MaxExecutionDuration,
              sorting,
              !!otherQuery ? otherQuery.maxResultCount : maxResultCount,
              !!otherQuery ? otherQuery.skipCount : skipCount,
            )
            .finally(() => {
              // finishedCallback!();
            })
            .then((res) => {
              resolve(res);
              // this.showPaging(res);
            })
            .catch((error) => {
              reject(error);
            });
        });
      },
      /**
       * 查看详情
       */
      getDetails(item?: AuditLogListDto) {
        this.modalHelper.create(AuditLogsDetails, { pageDataList: item }).subscribe((res) => {
          if (res) {
            this.refresh();
          }
        });
      },

      /**
       * 按钮回调事件
       */
      handleActionClick(event: string, item?: any) {
        console.log(event);
        switch (event) {
          case EVENT_BTN_ENUM.VIEW_DETAILS:
            this.getDetails(item);
            break;
          default:
            break;
        }
      },
    },
  });
</script>

<style scoped lang="less">
  .subscriptionEndUtc {
    text-align: center;
  }
  .list-table {
    width: 100%;
    white-space: nowrap;
  }
  // table
  .modal-body {
    padding: 0;
    min-width: 100%;
  }

  :deep(.ant-table-tbody > tr > td) {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    &:last-child {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: inherit;
    }
  }

  .table-edit {
    .anticon {
      margin-right: 10px;
    }
  }
  .detail {
    white-space: nowrap;
  }

  .table-delete,
  .ant-dropdown-link {
    margin-left: 20px;
  }

  .table--container {
    margin-top: 20px;
  }
</style>
